<template>
  <Header />
  <Main />
  <Footer />
  <div id="back-top-comp">
    <a-back-top visibilityHeight="100">
      <div class="back-top-inner">
        <i class="arrow-down"></i>
      </div>
    </a-back-top>
  </div>
</template>
<script setup>
import Header from "@/components/Header/index";
import Main from "@/components/Main/index";
import Footer from "@/components/Footer/index";
</script>

<style lang="scss">
* {
  padding: 0;
  margin: 0;
}

#app {
  position: relative;
  height: 100vh;
  width: 100vw;
}

#back-top-comp {
  .ant-back-top {
    bottom: 48px;
    right: 72px;
  }
  .back-top-inner {
    height: 48px;
    width: 48px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    text-align: center;
    font-size: 20px;
    display: flex;
    border-radius: 1px;
    .arrow-down {
      width: 12px;
      height: 12px;
      border-radius: 1px;
      border-top: 2px solid #eee;
      border-left: 2px solid #eee;
      transform: translate(calc(24px - 50%), calc(24px - 25%)) rotate(45deg);
    }
  }
}
</style>
